<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- use the following meta to force IE use its most up to date rendering engine -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name=”renderer” content=”webkit|ie-comp|ie-stand” />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
  <title>吾爱斗图</title>
  <meta name="keywords" content="qq表情在线制作,吾爱斗图表情在线制作,暴漫表情在线制作,在线表情制作,表情在线生成器,表情在线生成,表情制作器,表情制作网站,吾爱斗图熊猫表情在线制作,微信表情在线生成,在线制作表情,在线网页制作吾爱斗图表情,表情工厂,花熊,动态表情制作神器,表情包制作app,吾爱斗图表情制作网站,ps表情包制作教程,发图狂魔,怎样制作表情,吾爱斗图表情网页生成器,吾爱斗图表情制作网页,斗图神器,自定义表情,吾爱斗图教皇表情制作,吾爱斗图张学友表情制作,表情包,QQ表情包,微信表情包,斗图,表情包下载,制作表情,表情大全,装b神器,美女举牌照,帅哥举牌照,id照在线制作,证件制作,支付宝在线生成,吾爱斗图官网">
  <meta name="description" content="吾爱斗图网表情在线制作工具，超级简单制作各种模板QQ表情，吾爱斗图熊猫QQ微信表情包在线制作，斗图助攻神器。">
  <link rel="stylesheet" href="/css/index.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
  <div id="app">
    <div class="nav-wrap">
      <div class="logo">
        <img src="image/logo.png" >
      </div>
      <div class="noticeorfeedback">
        <ul>
          <li @click="navShowNotice"><img src="image/fb.png"></li>
          <li @click="navShowFeedback"><img src="image/fk.png"></li>
          <li class="banquan copyon"><a href="#">版权声明</a></li>
        </ul>
      </div>
      <div class="copyright">
        <div class="copy-box">
          <div class="copy-text">
            <div class="content-c">
              <div class="intro">
                <h3>吾爱斗图(www.52doutu.net)</h3>
                <p>收集了无数张表情包，分类丰富，在这里你会发现你会忘掉一切忧愁烦恼，尽情happy，这正是我们吾爱斗图的宗旨！</p>
                <p>本站资源均收集整理于互联网，其著作权归原作者所有，如果有侵犯您权利的资源，请来信告知，我们将尽快作出处理。</p>
                <div class="emial">
                  <span class="title">
                    联系方式：
                  </span>
                  1104399635@qq.com <br>
                  <span class="title" style="opacity:0;">
                    联系方式：
                  </span>
                  3083006017@qq.com
                </div>
                <div>
                  ®吾爱斗图 ICP主体备案号 津ICP备15008987号
                </div>
              </div>
              <div class="yqlj">
                <h3>友情链接：</h3>
                <a href="http://www.52doutu.net">百度</a>
                <a href="http://www.52doutu.net">天涯</a>
                <a href="http://www.52doutu.net">腾讯</a>
                <a href="http://www.52doutu.net">百世云诊所</a>
                <a href="http://www.52doutu.net">淘宝</a>
                <a href="http://www.52doutu.net">七牛</a>
              </div>
            </div>
          </div>
          <div class="copy-qq">
            <img src="image/qq.jpg">
          </div>
        </div>
      </div>
    </div>
    <notice></notice>
    <feedback></feedback>
    <div class="img-lt_box">  
      <search @searchclick="searchClick"></search>
      <!-- 公告预留 -->
      <div class="notice-box">
        <div class="notice-scroll">
          
        </div>
      </div>
      <div class="waterfall-component">
        <waterfall v-bind:data-list="dataList" v-bind:down="down" @clicknum="clicknum"></waterfall>
      </div>
    </div>

    <div class="slide-rt_box">
      <slide-bar v-bind:nav-list-data="navData" v-on:navbarclick="navbarClick" v-on:navbarclickindex="navbarClickIndex"></slide-bar>
    </div>
    <img-box v-bind:num="num" v-bind:data-list="dataList" @toggle="imgToggle" v-show="imgShow"></img-box>
    <dialog></dialog>
  </div>

  <!-- 瀑布流 -->
  <template id="waterfall">
    <div class="waterfall" id="waterfall-hook">
      <div class="dt-container">
       <!--  <ul class="clearfix waterfall-wrap" id="scroll-hook"> -->
           <transition-group tag="ul" name="slide"  class="clearfix waterfall-wrap"> 
              <li class="waterfall-list" v-for="(item, index) in dataList" @click="clickImg(item, index)" :key="item.id">
                <div class="content">
                  <div class="dt-top">
                    <img 
                      :src="'http://orz8lqn0g.bkt.clouddn.com/' + item.url" 
                      :height="item.width > imgWidth ? ((item.height / item.width) * (imgWidth - 10)).toFixed(2) : item.height">
                  </div>
                  <div class="dt-body" style="display: none;">
                    <p>
                      最好的斗图网站，不收藏就亏大了！
                    </p>
                    <div class="wrap-btm">
                      <span>点赞：<span>{{ item.count }}</span></span>
                    </div>
                  </div>
                  <div class="dt-footer">
                   
                  </div>
                  <div class="look-img"></div>
                </div>
              </li>
           </transition-group>
        <!-- </ul> -->
      </div>
    </div>
  </template>
  <!-- 详情列表 -->
  <template id="img-box">
    <transition name="fade">
      <div class="img-box" @click.stop="toggle">
        <transition name="fade">
          <!-- <div class="img-wrap" v-for="(item, index) in dataList" v-show="index == num" :key="index">
            <img :src="'http://orz8lqn0g.bkt.clouddn.com/' + item.url" >
          </div> -->
          <div class="img-wrap" v-if="imgIndex">
            <img :src="'http://orz8lqn0g.bkt.clouddn.com/' + imgIndex" >
          </div>
        </transition>
        <div class="img-details img-details_lt lt-on lt-disabled" @click.stop="prevClick"></div>
        <div class="img-details img-details_rt rt-on rt-disabled" @click.stop="nextClick"></div>
      </div>
    </transition>
  </template>
  <!-- 更新日志 -->
  <template id="notice">
    <transition name="rotate">
      <div class="notice-container" v-show="isNotice">
        <div class="n-position">
          <div class="navbar-header">
            更新日志
            <span class="icon-close" @click.stop="closeBox"></span>
          </div>
          <div class="navbar-body">
            <ul class="rt">
              <li v-for="item in noticeData">
                <span>{{ item.createTime }}</span>
                <div>
                  {{ item.content }}
                </div>
              </li>
            </ul>   
          </div>
          <div class="navbar-footer">
            
          </div>
        </div>
      </div>
    </transition>
  </template>

  <template id="search">
    <div class="search-box" id="search-hook">
     <!--  <div class="search-wrap">
        <input type="text" class="search" v-model="searchData">
        <div class="btns" @click="searchClick(searchData)">搜索</div>
        <span class="line one"></span>
        <span class="line two"></span>
        <span class="line ser"></span>
        <span class="line for"></span>
      </div> -->
    </div>
  </template>


  <template id="feedback">
    <transition name="fade">
      <div class="notice-container" v-show="isNotice">
        <div class="n-position feedback-container">
          <div class="navbar-header">
            问题反馈
            <span class="icon-close" @click.stop="isNotice = false"></span>
          </div>
          <div class="navbar-body feedback-body">
            <div class="feedback-content">
              <textarea v-model="textareaData" cols="30" rows="10" class="textarea"></textarea>
              <div class="auth-code clearfix">
                <div class="code-box clearfix">
                  <input type="text" v-model="code">
                  <img :src="codeUrl" v-if="authCodeData.authCode">
                </div>
              </div>
              <div class="btn btn-default" @click.stop="isNotice = false">取消</div>
              <div class="btn" @click="feedbackPost">提交</div>
            </div>
          </div>
          <div class="navbar-footer">
            
          </div>
        </div>
      </div>
    </transition>
  </template>
   <!-- <div class="slide-logo">
      <a href="#">
        <img class="logo" src="image/logo.png">
      </a>
    </div> -->
  <!-- 导航栏 -->
  <template id="slide_bar">
    <div class="slide_bar" id="slide-hook">
      <ul class="slide_body">
        <li class="slide_list"  @click.prevent="navbarClickIndex" :class="{'on': -1 === onClass}">
          <a href="#"><span class="glyphicon glyphicon-home icon_right"></span>首页</a>
          <span class="icon_sanjiao"></span>
        </li>
        <li class="slide_list" v-for="(item, index) in navListData" @click.prevent="navbarClick(item, index)" :class="{'on': index === onClass}">
          <a href="#">{{item.name}}</a>
          <span class="icon_sanjiao" ref="icon_sanjiao"></span>
        </li>
      </ul>
      <div class="bg_disabled" @click.stop=""></div>
    </div>
  </template>

  <!-- loading组件 -->
  <div class="loading" id="loading">
    <div class="spinner">
      <div class="rect1"></div>
      <div class="rect2"></div>
      <div class="rect3"></div>
      <div class="rect4"></div>
      <div class="rect5"></div>
    </div>
  </div>

  <template id="dialog">
    <div class="dialog">
      <div class="dialog-box">
        <div class="dialog-header">
          {{ title }}
        </div>
        <div class="dialog-body">
          {{ content }}
        </div>
      </div>
    </div>
  </template>

  <div class="up"></div>
  <script src="vendor/jquery/dist/jquery.min.js" charset="utf-8"></script>
  <script src="vendor/vue/dist/vue.min.js" charset="utf-8"></script>
  <script src="vendor/vue-router/dist/vue-router.min.js" charset="utf-8"></script>
  <script src="js/index.js" charset="utf-8"></script>
</body>
</html>
